<template>
  <div class="recordBox flex flex-col">
    <dl v-for="(item, index) in list" :key="index" class="flex min-h-[60px] flex-row">
      <dt class="mr-[16px]">
        <el-tag
          :color="tagType[item.description]"
          size="mini"
          effect="light"
          class="h-[28px] w-[60px] p-[6px] text-center text-[12px]"
          >{{ item.description }}</el-tag
        >
      </dt>
      <dd>
        <b v-if="item.description === '结束'">该流程已结束</b>
        <label v-if="item.description !== '结束'" class="block pb-[10px] text-[#959EB2]">{{ item.time }}</label>
        <div v-if="item.description !== '结束'" class="mb-[20px] pb-[8px] pt-[12px]">
          <p class="pb-[4px] text-[#363F51]">
            <b>{{ item.name }}</b>
          </p>
          <p
            v-if="['通过', '不通过', '审核', '审核中', '驳回'].includes(item.description)"
            class="pb-[4px] text-[#515A6E]"
          >
            处理人：{{ item.assigneeName }}
          </p>
          <p
            v-if="['通过', '不通过', '驳回'].includes(item.description) && item.comments.length > 0"
            class="flex items-center pb-[4px] text-[#515A6E]"
          >
            处理意见：
            <el-tooltip class="item" effect="dark" :content="onComments(item.comments)" placement="top">
              <span class="inline-block w-[200px] truncate">{{ onComments(item.comments) }}</span>
            </el-tooltip>
          </p>
          <p v-if="['提交', '重新发起', '重新提交'].includes(item.description)" class="pb-[4px] text-[#515A6E]">
            发起人：{{ item.assigneeName }}
          </p>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
import { systemWorkflowHistory } from "@/api/workflow";
export default {
  /**
   * 审批记录组件
   */
  name: "ApprovalRecord",
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
    workflowType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tagType: {
        提交: "#FFBF00",
        审核: "#1D7FF2",
        审核中: "#1D7FF2",
        通过: "#078d5c",
        结束: "#ed7b2f",
        不通过: "#FF3B30",
        重新发起: "#FFBF00",
        重新提交: "#FFBF00",
        驳回: "#FF3B30",
      },
      list: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { data } = await systemWorkflowHistory({ businessId: this.id, workflowType: this.workflowType });
      this.list = data.map((item) => {
        if (!item.comments) {
          item.comments = [];
        }
        return item;
      });
    },
    onComments(list) {
      return list.map((item) => item.fullMessage).join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
.recordBox {
  dl {
    &:not(:last-of-type) {
      dt {
        &::before {
          position: absolute;
          top: 0;
          right: 50%;
          z-index: -1;
          width: 50%;
          height: 100%;
          border-right: 1px dashed #eee;
          content: "";
        }
      }
    }

    dt {
      position: relative;
      z-index: 1;
    }

    dd {
      div {
        padding: 10px;
        line-height: 1.6;
        border: 1px solid #eee;
        border-radius: 4px;
      }
    }
  }
}

::v-deep .el-tag {
  color: #fff;
  border: none;
}
</style>
